<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>二、实现方式</h2>
  <div>display:none</div>
  <div>特点：元素不可见，不占据空间，无法响应点击事件.会导致浏览器的重排和重绘</div>
  <br>
  <div>visibility:hidden</div>
  <div>特点：元素不可见，占据页面空间，无法响应点击事件.不会触发重排，但是会触发重绘</div>
  <br>
  <div>opacity:0</div>
  <div>特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件</div>
  <br>
  <div>设置height、width模型属性为0</div>
  <div>特点：元素不可见，不占据页面空间，无法响应点击事件.如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素</div>
  <br>
  <div>position:absolute</div>
  <div>特点：元素不可见，不影响页面布局.将元素移出可视区域</div>
  <br>
  <div>clip-path</div>
  <div>特点：元素不可见，占据页面空间，无法响应点击事件.通过裁剪的形式【clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)】</div>


  <div class="path Dom">clip-path{polygon()}</div>
  <style>
    .Dom{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    /* clip-path CSS 属性使用裁剪方式创建元素的可显示区域，类似用剪刀裁剪卡片纸只保留剪刀走过的部分。 */
    /* polygon：此属性 效果为：多点连成线,可实现任意由点连成线的图形。 */
    /* clip-path:polygon(x1 y1,x2 y2) */
    /* clip-path:polygon(20px 30px,20px -30px,80px -30px ) */
    .path {
      clip-path: polygon(20px 30px,20px -30px,80px -30px);
    }
    .path6 {
      clip-path: polygon(5px 10px, 16px 3px, 16px 9px, 36px 9px, 36px 3px, 47px 10px, 36px 17px, 36px 11px, 16px 11px, 16px 17px);
    }

    .path7 {
      clip-path: polygon(5px 11px, 5px 9px, 16px 3px, 26px 3px, 40px 9px, 48px 15px, 48px 5px, 40px 11px, 26px 17px, 16px 17px);
    }
  </style>
</body>
</html>